<template>
    <div class="app-container">
      <div class="container_box">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="分錄編號" prop="entryCode">
                    <el-input disabled v-model="form.entryCode"  />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="分錄類型" prop="entryType">
                    <el-select
                    disabled
                      style="width: 100%"
                      v-model="form.entryType"
                      @change="entryTypeChange"
                    >
                      <el-option
                        v-for="dict in dict.type.account_entry_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="會計科目(借)" prop="JaccountSubject">
                    <el-cascader
                    disabled
                      style="width: 100%"
                      v-model="accountSubjectArrJ"
                      :options="accountSubjectArr"
                      filterable
                      :props="{
                        expandTrigger: 'hover',
                        value: 'dictValue',
                        label: 'name',
                        children: 'children',
                      }"
                      @change="queryASHandleChangeJ"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="會計科目(貸)" prop="DaccountSubject">
                    <el-cascader
                    disabled
                      style="width: 100%"
                      v-model="accountSubjectArrD"
                      :options="accountSubjectArr"
                      filterable
                      :props="{
                        expandTrigger: 'hover',
                        value: 'dictValue',
                        label: 'name',
                        children: 'children',
                      }"
                      @change="queryASHandleChangeD"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="摘要" prop="summary">
                    <el-input  disabled @input="$forceUpdate()" v-model="form.summary"  />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="會計賬期" prop="accountingPeriod">
                    <el-date-picker
                    disabled
                      style="width: 100%"
                      v-model="form.accountingPeriod"
                      value-format="yyyyMM"
                      type="month"
                      @input="$forceUpdate()"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item :label="BankNo_name" prop="BankNo">
                    <el-input
                      disabled
                      v-model="form.BankNo"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item :label="BankName_name" prop="BankAccount">
                    <el-input
                      disabled
                      v-model="form.BankAccount"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="金額" prop="amount">
                    <el-input disabled  @input="$forceUpdate()" v-model="form.amount" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="備註" prop="remark">
                    <el-input disabled  @input="$forceUpdate()" v-model="form.remark"  />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div style="text-align: center">
              <el-button  @click="cancel">返 回</el-button>
            </div>
          </el-col>
        </el-row>
  
          <!-- 選擇入賬銀行 -->
          <el-dialog
          :visible.sync="dialog_if_bank"
          destroy-on-close
          :close-on-click-modal="false"
          width="1000px"
          append-to-body
        >
          <bank-table
            :selected="selected_bank_id"
            @out_detail="bank_detail"
            @out_cancel="bank_cancel"
            :type="bankType"
          >
          </bank-table>
        </el-dialog>
      </div>
    </div>
  </template>
      
      <script>
  import {
    getAccountSubjectTree,
    getEntry,
    addEntry,
    updateEntry,
  } from "@/api/biz/entry";
  import bankTable from "@/components/biz/bankTable";
  export default {
    components: { bankTable },
    name: "EntryEdit",
    dicts: [
      "account_entry_type",
      "customer_tag",
      "customer_source",
      "industry_type",
      "cart_type",
      "sys_user_sex",
      "customer_level",
      "bank_type",
    ],
    data() {
      return {
        // 表单參數
        form: {
          jAccountSubjectType: null,
          jAccountSubjectOne: null,
          jAccountSubjectTwo: null,
          dAccountSubjectType: null,
          dAccountSubjectOne: null,
          dAccountSubjectTwo: null,
          accountingPeriod: this.$moment().format("YYYYMM"),
        },
        // 表单校验
        rules: {},
        accountSubjectArrJ: [],
        accountSubjectArrD: [],
        accountSubjectArr: [],
  
        BankNo_name: "銀行賬號",
        BankName_name: "賬戶名稱",
           // 選擇銀行詳細信息
           dialog_if_bank: false,
        selected_bank_id: "",
        bankType: "",
      };
    },
    created() {
      if (this.$route.query.id) {
        console.log(this.$route.query);
        this.getAccountSubjectTree(this.$route.query.id);
      }
    },
    activated() {
      if (this.$route.query.id) {
        console.log(this.$route.query);
        this.getAccountSubjectTree(this.$route.query.id);
      }
    },
    methods: {
        // 選擇銀行詳細信息----------------------------------
        open_dialog_bank() {
        this.dialog_if_bank = true;
      },
      bank_detail(item) {
        this.selected_bank_id = item.id;
  
        this.form.bankId = item.id;
        this.form.BankNo = item.bankNo;
        this.form.BankAccount = item.accountName;
        this.form.BankName = item.bankName;
  
        this.bank_cancel();
      },
      bank_cancel() {
        this.dialog_if_bank = false;
      },
      entryTypeChange(key) {
        console.log(key);
        this.form.BankNo = "";
        this.form.BankName = "";
        this.form.bankId = "";
        this.form.BankAccount = "";
        switch (key) {
          case "10":
            this.BankNo_name = "入賬銀行賬號";
            this.BankName_name = "入賬賬戶名稱";
            this.bankType = '10'
            break;
          case "20":
            this.BankNo_name = "出賬銀行賬號";
            this.BankName_name = "出賬賬戶名稱";
            this.bankType = '20'
            break;
          case "30":
            this.BankNo_name = "銀行賬號";
            this.BankName_name = "賬戶名稱";
            this.bankType = '40'
            break;
  
          default:
            break;
        }
      },
      get_detail(id) {
        getEntry(id).then((response) => {
          // this.form = response.data;
          this.selected_bank_id =  response.data.bankId
          this.form.id =  response.data.id
          this.form.BankNo =  response.data.bankNo
          this.form.BankAccount =  response.data.bankAccount
          this.form.amount =  response.data.amount
          this.form.summary =  response.data.summary
          this.form.entryCode =  response.data.entryCode
          this.form.jAccountSubjectType =  response.data.jAccountSubjectType
          this.form.jAccountSubjectOne =  response.data.jAccountSubjectOne
          this.form.jAccountSubjectTwo =  response.data.jAccountSubjectTwo
          this.form.dAccountSubjectType =  response.data.dAccountSubjectType
          this.form.dAccountSubjectOne =  response.data.dAccountSubjectOne
          this.form.dAccountSubjectTwo =  response.data.dAccountSubjectTwo
          this.form.entryType =  response.data.entryType
          this.form.remark =  response.data.remark?response.data.remark:''
  
  
          switch (this.form.entryType) {
          case "10":
            this.BankNo_name = "入賬銀行賬號";
            this.BankName_name = "入賬賬戶名稱";
            this.bankType = '10'
            break;
          case "20":
            this.BankNo_name = "出賬銀行賬號";
            this.BankName_name = "出賬賬戶名稱";
            this.bankType = '20'
            break;
          case "30":
            this.BankNo_name = "銀行賬號";
            this.BankName_name = "賬戶名稱";
            this.bankType = '40'
            break;
  
          default:
            break;
        }
  
          // this.selected_bank_id =  this.form.bankId
        //   this.form.BankNo = item.bankNo;
        // this.form.BankAccount = item.accountName;
        // this.form.BankName = item.bankName;
          this.accountSubjectArrJ = [];
          this.accountSubjectArrD = [];
          if (this.form.jAccountSubjectType != null) {
            this.accountSubjectArrJ.push(this.form.jAccountSubjectType);
          }
          if (this.form.jAccountSubjectOne != null) {
            this.accountSubjectArrJ.push(this.form.jAccountSubjectOne);
          }
          if (this.form.jAccountSubjectTwo != null) {
            this.accountSubjectArrJ.push(this.form.jAccountSubjectTwo);
          }
  
          if (this.form.dAccountSubjectType != null) {
            this.accountSubjectArrD.push(this.form.dAccountSubjectType);
          }
          if (this.form.dAccountSubjectOne != null) {
            this.accountSubjectArrD.push(this.form.dAccountSubjectOne);
          }
          if (this.form.dAccountSubjectTwo != null) {
            this.accountSubjectArrD.push(this.form.dAccountSubjectTwo);
          }
          console.log(this.accountSubjectArrJ);
          // this.bizInvoiceItemList = response.data.bizInvoiceItemList;
        });
      },
      queryASHandleChangeJ(subject) {
        console.log(subject);
        this.form.jAccountSubjectType = subject[0];
        this.form.jAccountSubjectOne = subject[1];
        this.form.jAccountSubjectTwo = subject[2];
      },
      queryASHandleChangeD(subject) {
        console.log(subject);
        this.form.dAccountSubjectType = subject[0];
        this.form.dAccountSubjectOne = subject[1];
        this.form.dAccountSubjectTwo = subject[2];
      },
      getAccountSubjectTree(id) {
        getAccountSubjectTree().then((response) => {
          this.accountSubjectArr = response.data;
          this.get_detail(id);
        });
      },
      /** 提交按钮 */
      submitForm(type) {
        this.form.entryStatus = type;
        console.log(this.form);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            updateEntry(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/entry/index", name: "Entry" };
                this.$tab.refreshPage(obj);
              });
            });
          }
        });
      },
      cancel() {
        this.$tab.closePage().then(() => {
          // 执行結束的逻辑
          const obj = { path: "/entry/index", name: "Entry" };
          this.$tab.refreshPage(obj);
        });
      },
    },
  };
  </script>
    
    <style  >
  .signType thead .el-table-column--selection .cell {
    display: none;
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  </style>
      